<template>
    <div class="book-detail">

        <div class="book-cover">
            <img :src="detailData.backgroundImg" alt="" class="book">
        </div>
        <p class="book-title">
            {{detailData.title}}
        </p>
        <div class="book-intro">
            <div class="book-biref">
                <div class="biaoti">
                    <span class="title biref-text">音频简介</span>
                    <span class="audio-time" style="color: #707070;font-family:PingFang-SC-Regular;">音频时长：{{detailData.audioDuration}}</span>
                </div>
            </div>
            <div class="book-desc">
                <p class="text">{{detailData.summary}}</p>
            </div>
        </div>
        <div class="should-hear" v-html="detailData.introduction">
            <!-- <div class="title hear-title biaoti">你将听到</div> -->
            <!-- <div class="hear-text">
                <p class="text">1、早期中华帝国:秦与汉</p>
                <p class="text">1、早期中华帝国:秦与汉</p>
                <p class="text">1、早期中华帝国:秦与汉</p>
                <p class="text">1、早期中华帝国:秦与汉</p>
                <p class="text">1、早期中华帝国:秦与汉</p>
            </div> -->
        </div>
        <!-- <div class="recomment-book">
            <div class="title recomment-title biaoti">推荐书目</div>
            <div class="book-info">
                <p class="text">书名：《未来简史》</p>
                <p class="text">原作者：《未来简史》</p>
                <p class="text">出版社：《未来简史》</p>
                <p class="text">译者：王一平</p>
            </div>
        </div> -->
        <div class="comment-info">
            <div class="title comment-title biaoti">
                懂行出品 质量保证
            </div>
            <div class="comments">
                <div class="box">
                    <div class="comment" v-for="item in detailData.memberList" :key="item.id">
                        <div class="head-img">
                            <img :src="item.headUrl" style="width:100%; height:100%;" alt="">
                        </div>
                        <div class="info">
                            <p class="username">{{ item.name }}</p>
                            <p class="posititon">{{ item.roleText }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class='huanjie'>6个环节<span>211</span>小时精心打磨完成上线</div>
        </div>
        <div class="Recommend">
            <div class='recommend-title'>
                <span class="title">同类推荐</span>
                <span class="more" @click='seemore'>查看全部<i class="more-icon"></i></span>
            </div>
            <div class="recommend-list">
                <div class="recommend-item" v-for="item in detailData.recommentBookList" :key="item.id" @click="skipDetail(item.id)">
                    <img :src="item.coverImg" class="left" alt="">
                    <div class="right">
                        <p class="title">{{item.title}} | {{item.unscramble}}</p>
                        <p class="box-desc">{{item.summary}}</p>
                        <div class="time">{{item.audioDuration}}</div>
                    </div>
                </div>
            </div>
            <div class='zhanwei'></div>
        </div>
        <div class="opration" v-if="userStatus == 0">
            <div class="shiting" @click='shiting'>试听</div>
            <div class="login" @click='login'>登录收听完整版</div>
        </div>
        <div class="opration" v-if="userStatus == 1">
            <div class="shiting" @click='shiting'>试听</div>
            <div class="login" @click='gotoVIP'>开通VIP立即拿下</div>
        </div>
        <div class="opration" v-if="userStatus == 2">
            <div class="login" @click='paly'>播放</div>
        </div>
        <div class="opration" v-if="userStatus == 3">
            <div class="login" @click='buyit'>拿下</div>
        </div>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    import { getBookDetail, buyBook } from '@/utils/api.js';
    export default {

        data(){
            return {
                userStatus: '',
                likeList: [],
                recommentBookList:[],
                detailData: {

                }
            }
        },
        created(){
            this.init();
        },
        mounted() {
            if(!this.$router.currentRoute.query.uid) {
                this.userStatus = 0
            }
        },
        methods: {
            init(){
                this.getDetailInfo();
            },
            gotoVIP() {
                const uid = this.$router.currentRoute.query.uid
                this.$router.push({path:'confirOrder', query: {uid:uid, pid: this.detailData.id}})
            },
            seemore() {
                const uid = this.$router.currentRoute.query.uid
                this.$router.push({path: 'productClassify', query: {uid: uid}})
            },
            getDetailInfo(){
                var mid = this.$router.currentRoute.query.id
                var params = {
                    data: {
                        mid,
                        uid: this.$router.currentRoute.query.uid
                    }
                }
                getBookDetail(params).then(res => {
                    if(res){
                        this.detailData = res.data.result;
                        // console.log(res.data.result)
                        // console.log(this.detailData);
                        if (this.detailData.isBuy == 4) {//未拿下
                            if (this.detailData.isMember == 1) {//是会员
                                //显示拿下按钮
                                this.userStatus = 3
                            }else{
                                // 加入vip
                                this.userStatus = 1
                            }
                        } else if(this.detailData.isBuy == 1) {
                            //就是次卡购买或者是书的作者
                             //显示为播放按钮
                            this.userStatus = 2
                        } else if(this.detailData.isBuy == 2){//未购买
                            if(this.detailData.isMember==1){
                                this.userStatus = 3
                                //显示拿下
                            }else{
                                this.userStatus = 1
                                //加入vip
                            }
                        } else if(this.detailData.isBuy == 3) {//已拿下
                            if (this.detailData.isMember == 1) {//是会员
                                this.userStatus = 2
                                //显示播放按钮
                            }else{
                                //加入vip
                                this.userStatus = 1
                            }
                        }
                    }
                })
            },
            skipDetail(id){
                const uid = this.$router.currentRoute.query.uid
                console.log(id)
                this.$router.push({path: 'bookDetail', query: { id: id, uid:uid }})
                window.location.reload()
            },
            shiting() {
                const pid = this.detailData.id
                const uid = this.$router.currentRoute.query.uid
                this.$router.push({path:'try', query: {pid: pid, uid: uid, type: 0}})
            },
            paly() {
                const pid = this.detailData.id
                const uid = this.$router.currentRoute.query.uid
                this.$router.push({path:'try',query: {pid: pid, uid: uid, type: 1}})
            },
            login() {
                const id = this.$router.currentRoute.query.id
                this.$router.push({path:'wechatlogin',query: {id: id, from: 'detail'}})
            },
            buyit() {
                var mid = this.$router.currentRoute.query.id
                var params = {
                    data: {
                        mid,
                        uid: this.$router.currentRoute.query.uid
                    }
                }
                buyBook(params).then((res) => {
                    console.log(res)
                    if(res.data.code == 0){
                        Toast('成功拿下')
                        this.userStatus = 2
                    }
                })
            }
        }
    }
</script>

<style lang="scss">

    .book-detail{
        font-family: PingFang-SC;
        .book-cover {
            height: 5rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #EFEFEF;
            .book{
                width: 3rem;
                height: 4rem;
                box-shadow: .05rem .05rem .05rem #666;
            }
        }
        .title {
            font-size: .36rem;
            color: #0a0a0a;
            font-weight: bold;
            font-family:PingFang-SC-Bold;
        }
        .book-title{
            padding: 0 .3rem;
            margin-top: .2rem;
            font-size: .36rem;
            color: #0a0a0a;
            font-weight: 600;
            line-height: .52rem;
            font-family: PingFang-SC-Bold;
        }
        .book-intro{
            padding: 0 .3rem;
            .book-biref{
                margin-top: .2rem;
                display: flex;
                justify-content: space-between;
                align-items: space-between;
                .biref-text{
                    font-weight: bold;
                }
            }
            .book-desc{
                // margin-top: .2rem;
                font-size: .32rem;
                color: #282828;
                .text{
                    line-height: .5rem;
                    font-family: PingFang-SC;
                }
            }
        }
        .biaoti{
            height: 0.96rem;
            font-size: 0.36rem;
            width: 100%;
            border-top:1px solid #ccc;
            line-height: 0.9rem;
            display: flex;
            justify-content: space-between;
            font-family: PingFang-SC-Bold;
        }
        .should-hear{
            margin: 0 .3rem;
            margin-top: .3rem;
            border-top: 1px solid #ccc;
            font-family: PingFang-SC-Medium!important;
            span{
                font-family: PingFang-SC!important;
            }
            .hear-text{
                margin-top: .15rem;
                .text{
                    font-size: .28rem;
                    color: #282828;
                    line-height: .48rem;
                }
            }
        }
        .should-hear p{
            line-height: 0.5rem!important;
            color: #292929;
        }
        .should-hear p:nth-of-type(1){
            height: 0.36rem;
            font-size: .36rem!important;
            color: #0a0a0a;
            font-weight: bold;
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }
        .should-hear p:nth-of-type(1) span{
            font-size: .3rem!important;
            color: #0a0a0a;
            // font-weight: bold;
        }
        .recomment-book{
            padding: 0 .3rem;
            margin-top: .3rem;
            .book-info{
                .text{
                    line-height: .5rem;
                }
            }
        }
        .comment-info{
            padding: 0 .3rem;
            margin-top: .3rem;
            .comments{
                width: 100%;
                display: flex;
                .box{
                    display: flex;

                }
                .comment{
                    width: 1.2rem;
                    text-align: center;
                    .head-img{
                        display: flex;
                        align-items: center;
                        width: 0.7rem;
                        height: 0.7rem;
                        margin: 0 0.2rem;
                        img{
                            border-radius: 50%;
                        }
                    }
                    .username{
                        margin-top: .2rem;
                        font-size: .24rem;
                        line-height: 0.24rem;
                        height: 0.24rem;
                        font-family: PingFang-SC-Medium;
                        text-align: center;
                        color: #0a0a0a;
                    }
                    .posititon{
                        font-size: .20rem!important;
                        line-height: .2rem;
                        height: .2rem;
                        margin-top: .1rem;
                        color: #707070;
                    }
                }
                .tip-info{
                    margin-top: .15rem;
                    font-size: .26rem;
                    color: #707070;
                    .tip-icon{
                        margin-right: .15rem;
                        vertical-align: middle;
                        display: inline-block;
                        width: .28rem;
                        height: .28rem;
                        border-radius: 50%;
                        background: url(../../assets/images/choosed-icon.png) no-repeat center; 
                        background-size: 100% 100%;                       
                    }
                    .num{
                        color: #e71f19;
                    }
                }

            }
            
        }
    }
    .Recommend{
        padding: 0 .3rem;
        margin-top: .3rem;
        .recommend-title{
            display: flex;
            justify-content: space-between;
            align-items: space-between;
            .more{
                color: #707070;
            }
            .more-icon{
                display: inline-block;
                height: .2rem;
                width: .12rem;
                margin-left: 0.1rem;
                background: url(../../assets/images/next-icon.png) no-repeat center;
                background-size: 100% 100%;
            }
        }
        .recommend-list{
            .recommend-item{
                height: 3rem;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.3rem;
                border-bottom: 1px solid #ccc;
                .left{
                    height: 2.4rem;
                    width: 1.8rem;
                }
                .right{
                    flex: 1;
                    height: 100%;
                    padding-left:0.3rem;
                    .title{
                        margin-top: 0.3rem;
                        font-size: 0.3rem;
                        line-height: 0.45rem;
                        height: 0.9rem;
                        overflow:hidden; 
                        text-overflow:ellipsis;
                        display:-webkit-box; 
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:2;
                    }
                    .box-desc{
                        margin-top: 0.08rem;
                        font-size: 0.26rem;
                        line-height: 0.36rem;
                        height: 0.7rem;
                        color: #707070;
                        overflow:hidden; 
                        text-overflow:ellipsis;
                        display:-webkit-box; 
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:2;
                        margin-bottom: 0.36rem;
                    }
                    .time{
                        color:#707070;
                        margin-top: 0.05rem;
                    }
                } 
            }

        }
        
    }
    .huanjie{
        padding: 0.4rem 0 0.3rem 0.4rem;
        background: url('../../assets/images/choosed-icon.png') no-repeat left center;
        background-size: 0.3rem 0.3rem;
        span{
            color:#e61f18;
        }
    }
    .opration{
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        height: 0.95rem;
        width: 100%;
        border-top: 1px solid #ccc;
        .shiting{
            flex: 1;
            background: #fff;
            line-height: 0.95rem;
            text-align: center;
            font-size: 0.3rem;
            // font-weight: 900;
        }
        .login{
            flex:1;
            background: #f00;
            color: #fff;
            font-size: 0.3rem;
            line-height: 0.95rem;
            text-align: center;
            // font-weight: 900;
        }
    }
.zhanwei{
    width: 100%;
    height: 0.95rem;
}
</style>




